<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script>
    	if(localStorage.getItem("language") == "zh_cn"){
    		document.write("<script type='text/javascript' src='js/zh_cn.js'><\/script>");
    	}else if(localStorage.getItem("language") == "zh_tw"){
    		document.write("<script type='text/javascript' src='js/zh_tw.js'><\/script>");
    	}else{
    		document.write("<script type='text/javascript' src='js/en.js'><\/script>");
    	}
    </script>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
		*{margin: 0px;padding: 0px;font-size: 12px;}
		#tab table{width: 100%;padding: 0px;margin:0px;border-spacing:0px;border: 1px solid #ccc;border-radius: 4px;}
		#tab table th,table td{text-align: center;border: 1px solid #ccc;}
		#tab table tr:nth-child(even){
			background: #f5f5f5;
		}
		#tab thead tr{height: 30px;}
		button{min-width: 64px;line-height: 20px;margin: 0px 10px;border-radius: 4px;color: #333;border: 1px solid #ccc;background-color: #fff;cursor: pointer;padding: 2px 7px 2px;color: #fff;background-color: #337ab7;border-color: #2e6da4;}
    	#tab table img{width: 30px;}
    	.k-overlay{
    		position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 100;
		    width: 100%;
		    height: 100%;
		    background-color: #000;
		    filter: alpha(opacity=50);
		    display: none;
		    opacity: 0.5;
		}
		.content{
		    display: none;
		    justify-content: center;
		    width: 100%;
		    height: 100%;
		    position: fixed;
		    top: 0;
		    left: 0;
		    align-items: center;
		    z-index: 102
		}
		.content table{border: 1px solid #ccc;border-radius: 4px;background: #fff;}
		.content table tr{line-height: 50px;}
		.content table tr td{text-align: left;border: 0px;margin-left: 10px;padding: 0px 20px;}
		.content input{padding: 5px;margin: 0px 0px 0px 0px;border-radius: 4px;border:1px solid #ccc;}
		.content thead tr td{border-bottom: 1px solid #ccc;}
    </style>
    <script type="text/javascript">

    	function add(){
    		$(".k-overlay,.content").css("display","flex");
    	}
    </script>
</head>
<body>
	<div id="tab" style="width: 98%;padding: 1%;">
		<table>
			<thead>
				<tr>
					<td colspan="5" style="text-align:left;line-height: 40px;border-right: 0px;font-weight: bold;padding-left: 30px;"><script>document.write(language.weihu_jieyong)</script></td>
					<td colspan="4" style="text-align:right;line-height: 40px;border-left: 0px;"><button onclick="add()">increase</button></td>
				</tr>
				<tr style="background: #f5f5f5;">
					<th style="width: 5%;"><script>document.write(language.order_number)</script></th>
					<th style="width: 5%;"><script>document.write(language.borrow_sth_number)</script></th>
					<th style="width: 10%;"><script>document.write(language.borrow_sth_name)</script></th>
					<th style="width: 10%;"><script>document.write(language.Bar_code_QR_code)</script></th>
					<th style="width: 10%;"><script>document.write(language.Total_deposit)</script></th>
					<th style="width: 10%;"><script>document.write(language.Borrower)</script></th>
					<th style="width: 10%;"><script>document.write(language.brokerage)</script></th>
					<th style="width: 15%;"><script>document.write(language.borrow_sth_time)</script></th>
					<th style="width: 10%;"><script>document.write(language.operation)</script></th>
				</tr>
			</thead>
			<tbody>
				<tr>
				<td>1</td>
				<td>ASDKJFGAD</td>
				<td>物品1</td>
				<td><img width='100px' src="1.png" alt=""></td>
				<td>200</td>
				<td>李四</td>
				<td>张三</td>
				<td>2017-10-24</td>
				<td><button>print label</button></td>
			</tr>
			</tbody>
			
		</table>
	</div>

	<div class="k-overlay"></div>

	<div class="content">
		<table style="border-spacing:0px;">
			<thead>
				<tr>
					<td colspan="2" style="text-align:left;line-height: 40px;font-weight: bold;padding-left: 30px;">New borrowed goods</td>
					<td colspan="2" style="text-align:right;line-height: 40px;"><button onclick='$(".k-overlay,.content").css("display","none");' style="border:0px;margin:0px;">X</button></td>
				</tr>
			</thead>
			<tbody>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
				<tr>
                	<td>Name of article:</td><td><input type="text" placeholder="Please enter the name of the article" /></td>
                	<td>Total deposit:</td><td><input type="text" placeholder="Please input the total deposit" /></td>
            	</tr>
				<tr>
                	<td>Borrower:</td><td><input type="text" placeholder="Please input the borrower" /></td>
                	<td>Handle person:</td><td><input type="text" placeholder="Please input the interviewee" /></td>
                </tr>
				<tr>
                	<td>Borrowing time:</td><td><input type="data" value="2017-10-24" /></td>
                	<td>Remarks:</td><td><input type="text" placeholder="Please input remarks" /></td>
                </tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tbody>
			<tfoot>
                <tr style="line-height: 10px;"><td style="border-top: 1px solid #ccc;" colspan="4">&nbsp;</td></tr>
				<tr>
					<td></td>
					<td colspan="3" style="text-align: right;">
						<button onclick='$(".k-overlay,.content").css("display","none");'>cancel</button>
						<button onclick='$(".k-overlay,.content").css("display","none");'>Generate two-dimensional code and save</button>
					</td>
				</tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tfoot>
		</table>
	</div>
</body>
</html>